<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/BackgroundManage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-input placeholder="请输入角色名称关键字搜索"
              v-model="keyword"
              class="input-with-select"
              style="width: 30%"
              clearable>
    </el-input>
    <el-button type="info" size="medium" icon="el-icon-search" @click="initRoleList" round>搜索</el-button>
    <el-button type="primary" round style="position:relative;left: 51%" @click="addRoleVisible = true">添加角色
    </el-button>
    <el-table :data="roleList" style="width: 100%;"
              :row-key="getRowKeys"
              :expand-row-keys="expands"
              @expand-change="expandSelect"
              @row-click="clickTable">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="角色名称:"><span>{{ props.row.name }}</span></el-form-item>
            <el-form-item label="角色code:"><span>{{ props.row.code }}</span></el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ props.row.insertTime | formatDate(props.row.insertTime) }}</span>
            </el-form-item>
            <el-form-item label="最后修改时间:">
              <span>{{ props.row.updateTime | formatDate(props.row.updateTime) }}</span>
            </el-form-item>
            <el-form-item label="包含权限:">
                  <span v-for="permission in props.row.permissions">
                    &nbsp;{{ permission.name }}&nbsp;
                  </span>
            </el-form-item>
          </el-form>
        </template>

      </el-table-column>
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column label="角色名称" prop="name" align="center"></el-table-column>
      <el-table-column label="角色code" prop="code" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-tooltip class="item" effect="dark" content="权限配置" placement="bottom-end">
            <el-button type="info" size="small" icon="el-icon-setting" @click="access(scope.row)" round></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="编辑角色" placement="bottom">
            <el-button type="success" size="small" icon="el-icon-edit" @click="showUpdate(scope.row)" round></el-button>
          </el-tooltip>

          &nbsp;
          <el-tooltip class="item" effect="dark" content="删除角色" placement="bottom-start">
            <el-popconfirm
                confirm-button-text='好的'
                @confirm="deleteRole(scope.row.id)"
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除吗？">
              <el-button type="danger" slot="reference" size="small" icon="el-icon-delete" round></el-button>
            </el-popconfirm>
          </el-tooltip>

        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 29]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--添加角色-->
    <add-role :form-visible="addRoleVisible"
              :add-form-visible.sync="addRoleVisible"
              @roleList="initRoleList()"></add-role>

    <!--修改角色-->
    <update-role :form-visible="updateVisible"
                 :form-role="updateRole"
                 :update-form-visible.sync="updateVisible"
                 @roleList="initRoleList()"></update-role>

    <!--权限配置-->
    <AccessAllot :form-visible="accessVisible"
                 :form-role="accessRole"
                 :access-form-visible.sync="accessVisible"
                 @roleList="initRoleList()"></AccessAllot>

  </div>
</template>

<script>

export default {
  name: "roleManage",
  components: {
    AddRole: () => import('@/views/Background/roleAndMenu/AddRole.vue'),
    UpdateRole: () => import('@/views/Background/roleAndMenu/UpdateRole.vue'),
    AccessAllot: () => import('@/views/Background/roleAndMenu/AccessAllot.vue')
  },
  data() {
    return {
      roleList: [
        {
          id: 0,
          code: "",
          name: "",
          insertTime: "",
          updateTime: "",
          permissions: []
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      keyword: "",

      //展开行相关参数
      expands: [],
      getRowKeys(row) {
        return row.id;
      },

      //添加角色
      addRoleVisible: false,

      //修改角色
      updateVisible: false,
      updateRole: {
        id: '',
        name: '',
        code: ''
      },

      //权限修改
      accessVisible: false,
      accessRole: {
        id: '',
        name: ''
      }
    }
  }
  ,

  //时间格式化
  filters: {
    formatDate(date) {
      let moment = require('moment');
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
  }
  ,
  methods: {
    //点击展开行事件
    clickTable(row) {
      // this.$refs.refTable.toggleAttribute(row);
    }
    ,
    //这点面板每次只能展开一行
    expandSelect(row, expandedRows) {
      let that = this;
      if (expandedRows.length) {
        that.expands = [];
        if (row) {
          that.expands.push(row.id);//每次push进去每行的id
        }
      } else {
        that.expands = [];//默认不展开
      }
    }
    ,

    //查询所有角色及关联权限
    initRoleList() {
      this.$emit('upList')
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      }
      this.$axios.postForm("/role/selectList", params).then(response => {
        let responseData = response.data;
        if (responseData.code == 200) {
          let pageData = responseData.data;
          this.currentPage = pageData.currentPage;
          this.pageSize = pageData.size;
          this.total = pageData.total;
          this.roleList = pageData.pageVo;
        }
      })
    }
    ,

    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.initRoleList();
    }
    ,

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initRoleList();
    }
    ,
    //删除角色
    deleteRole(id) {
      this.$axios.delete("/role/deleteRole/" + id).then(response => {
        let responseData = response.data;
        if (responseData.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 2000
          })
          this.currentPage=1;
          this.initRoleList();
        }
      })
    }
    ,
    //显示修改角色信息页面
    showUpdate(role) {
      this.updateVisible = true;
      let {id, name, code} = role;
      this.updateRole = {id, name, code};
    },
    //权限配置
    access(role) {
      this.accessVisible = true;
      this.accessRole = role;

    }
  },
  created() {
    this.initRoleList();
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
*{
  margin: 8px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>